<extend name="Layout/ins_popup" />
<block name="content">
    <nav class="navbar navbar-default" role="navigation">
        <!--<div class="navbar-header">-->
            <!--<a class="navbar-brand" href="#"></a>-->
        <!--</div>-->
        <div>
            <ul class="nav navbar-nav">
                <volist name="mainSheet" id="mSheet" key="k">
                    <if condition="$k eq 1">
                        <li class="active"><a href="#" tabId = "{$k}">{$mSheet}</a></li>
                        <else/>
                        <li><a href="#"  tabId = "{$k}">{$mSheet}</a></li>
                    </if>

                </volist>
                <present name="dropdownSheet">
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                            更多
                            <b class="caret"></b>
                        </a>
                        <ul class="dropdown-menu">
                            <volist name="dropdownSheet" id="dSheet" key="dk">
                                <li><a href="#"  tabId="{$dk}">{$dSheet}</a></li>
                            </volist>
                        </ul>
                    </li>
                </present>
            </ul>

            <ul class="nav navbar-nav navbar-right">

                  <button class="btn btn-bitbucket"  style="margin-right: 30px;margin-top:10px;" onclick="printContent();">打印</button>
                  <button class="btn btn-bitbucket"  style="margin-right: 30px;margin-top:10px;" onclick="myclose();">关闭</button>

            </ul>
        </div>
    </nav>
    <div  class="container excel-contents" id="printContent">
        {$style}
        <volist name="fileContent" id="content" key = "ck">
            <if condition="$ck eq 1">
                    <div style="display: block;" contentId="{$ck}">
                        {$content}
                    </div>
                <else/>
                <div style="display:none;" contentId="{$ck}">
                    {$content}
                </div>
            </if>
        </volist>

    </div>

    <!-- 模态框（Modal） -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog"
         aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close"
                            data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        批注
                    </h4>
                </div>
                <div class="modal-body">
                    <textarea name="comment" id="comment" class="center-block form-control" > </textarea>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default"
                            data-dismiss="modal">关闭
                    </button>
                    <button type="button" class="btn btn-primary" id="commentBtn">
                        确定
                    </button>
                </div>
            </div><!-- /.modal-content -->

</block>
<block name="js">
	<script type="text/javascript">

         var signObject = new Object();
         var currentRow = 0;
         var currentCol = 0;
         var currentSheet = 0;

         $(".navbar-nav a[tabId]").on("click",function() {
             $("[contentId]").hide();
           $("[contentId="+$(this).attr("tabId")+"]").show();
            // $(".excel-content div[contentId="+$(this).attr("contentId")+"]").show();
        });

        function printContent(){
           $("#printContent").jqprint({'debug':true,"importCSS":false});
        }

        $(function(){

            var menu = new BootstrapMenu('td', {
                fetchElementData: function(tdElement) {
                    return tdElement;
                },
                actions: [{
                    name: '添加批注',
                    onClick: function(tdElement) {
                        $(tdElement).addClass("td-sign");
                        var rowId = $(tdElement).parent().attr("class").slice(3);
                        var tdClass = $(tdElement).attr("class");
                        var colId = tdClass.slice(6,tdClass.search(' '));
                        var sheetId = $(tdElement).parents("[contentid]").attr("contentid");

                        currentCol = colId;
                        currentRow = rowId;
                        currentSheet = sheetId;

                        $("#myModal").modal('show');

                    }
                }, {
                    name: '删除批注',
                    onClick: function(tdElement) {
                        $(tdElement).removeClass("td-sign");
                        var rowId = $(tdElement).parent().attr("class").slice(3);
                        var tdClass = $(tdElement).attr("class");
                        var colId = tdClass.slice(6,tdClass.search(' '));
                        var sheetId = $(tdElement).parents("[contentid]").attr("contentid");
                        delete  signObject[sheetId+"-"+rowId+"-"+colId];
                    }
                }, {
                    name: '保存批注',
                    onClick: function() {
                        $.post(
                                "{:U('open',array('attachId'=>$attachId))}",
                                {"comment":signObject},
                                function(){

                                }
                        );
                    }
                }]
            });


            $("#commentBtn").click(function(){
                if($("#comment").val() != ""){
                    var tdObject = {"row":currentRow,"col":currentCol,"comment":$("#comment").val(),"sheet":currentSheet};
                    signObject[currentSheet+"-"+currentRow+"-"+currentCol] = tdObject;
                    console.log(signObject);
                }
                $("#myModal").modal("hide");

            });

        });

        // $("table").css("overflow-x","scroll");
	</script>
    <script src = "__INS__/js/BootstrapMenu.min.js"></script>
    <script src="__INS__/js/jquery-migrate-1.2.1.min.js"></script>
    <script src="__INS__/js/jquery.jqprint-0.3.js"></script>


</block>